<script setup>
import { computed, onMounted, ref, watchEffect } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import { getCourseData } from '@/api/index.js'
import Pice from '@/components/home/Pice.vue'
import { useInfiniteScroll } from '@vueuse/core'


const router = useRouter()
const route = useRoute()
let title = route.params.category

let limit=ref(8)

const loading = ref(false);
const finished = ref(false)

let list = ref([])
let active = ref('hot');

onMounted(() => {
  getdata()
})
const getdata = async () => {
  let { data } = await getCourseData({ categroy: title })
  // console.log(data);
  list.value = data
 
}

const onLoad = () => {
      setTimeout(() => {
        limit.value+=6
        loading.value = false;
        if (limit.value >= list.value.length) {
          finished.value = true;
        }
      }, 500);
    };

const onClickLeft = () => history.back();
const onClickRight = () => {
  router.push('/search')
};

const storeCourseData = (item) => {
  localStorage.setItem('listObj', JSON.stringify(item));
  router.push('/xiang')
};

const newlist = computed(() => {
  if (active.value == 'hot') {
    return list.value.slice(0,limit.value).sort((a, b) => b.num - a.num)
  } else {
    return list.value.slice(0, limit.value)
  }
})



</script>

<template>
  <div>
    <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
      <template #right>
        <van-icon name="search" class="iconsearch" />
      </template>
    </van-nav-bar>
    <div class="sort" v-if="route.params.category !== '热门好课' && route.params.category !== '精品课程'">
      <van-tabs v-model:active="active">

        <van-tab title="最热" name="hot"></van-tab>
        <van-tab title="最新" name="new"></van-tab>

      </van-tabs>
    </div>
    <!-- 列表 -->
    <div>

      <div class="inner">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">

          <Pice v-for="(item, index) in newlist" :key="index" :pic="item.image" :title="item.title" :price="item.price"
            :dis="item.discount" :num="item.num" @click="storeCourseData(item)"></Pice>

        </van-list>


      </div>
    </div>

  </div>
</template>


<style scoped lang="scss">
.inner {
  padding: 10px;
}

.iconsearch {
  font-size: 0.7rem;
}

.container {
  overflow-y: scroll;
  height: 650px;
  margin-top: 20px;
  padding: 5px;
}
</style>
